<template>
  <div class="setting-container">
    <el-form ref="form" :model="form" label-width="150px">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="LDAP" name="ldap" key="ldap">
          <div v-if="activeTab === 'ldap'">
          <el-form-item :label="$t('ldap_open_label')">
            <el-switch v-model="form.ldap_open"></el-switch>
          </el-form-item>

          <div>
            <el-form-item label="ldap host">
              <el-input
                v-model="form.ldap_form.host"
                class="form-el"
              ></el-input>
            </el-form-item>

            <el-form-item label="ldap port">
              <el-input
                v-model="form.ldap_form.port"
                style="width:90px"
              ></el-input>
            </el-form-item>

            <el-form-item label="ldap base dn ">
              <el-input
                v-model="form.ldap_form.base_dn"
                class="form-el"
                placeholder="例如 dc=showdoc,dc=com"
              ></el-input>
            </el-form-item>

            <el-form-item label="ldap bind dn ">
              <el-input
                v-model="form.ldap_form.bind_dn"
                class="form-el"
                placeholder="cn=admin,dc=showdoc,dc=com"
              ></el-input>
            </el-form-item>

            <el-form-item label="ldap bind password ">
              <el-input
                v-model="form.ldap_form.bind_password"
                type="password"
                class="form-el"
                placeholder="例如 123456"
              ></el-input>
            </el-form-item>

            <el-form-item label="ldap version">
              <el-select v-model="form.ldap_form.version" class="form-el">
                <el-option label="3" value="3"></el-option>
                <el-option label="2" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="ldap user filed">
              <el-input
                v-model="form.ldap_form.user_field"
                class="form-el"
                placeholder="例如 cn 或者 sAMAccountName"
              ></el-input>
            </el-form-item>
            
            <el-form-item label="ldap name field">
              <el-input
                v-model="form.ldap_form.name_field"
                class="form-el"
                placeholder="例如 displayName 或者 givenName"
              ></el-input>
              <el-tooltip
                effect="dark"
                content="用于同步LDAP用户姓名到ShowDoc的名称字段，可留空"
                placement="top"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
            </el-form-item>
            
            <el-form-item label="search filter">
              <el-input
                v-model="form.ldap_form.search_filter"
                class="form-el"
                placeholder="(cn=*)"
              ></el-input>
              <el-tooltip
                effect="dark"
                placement="top"
              >
                <div slot="content">
                  LDAP 搜索过滤条件<br/><br/>
                  <strong>推荐表达式：</strong><br/>
                  • 按组过滤：(&(memberOf=cn=组名,ou=OU名,dc=域名,dc=cn))<br/>
                  • 精确登录：(sAMAccountName=%(user)s)<br/>
                  • 通用搜索：(cn=*)<br/><br/>
                  <strong>说明：</strong><br/>
                  • %(user)s 占位符在登录时会替换为实际用户名<br/>
                  • 同步时会自动过滤掉计算机、组等非用户对象
                </div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </el-form-item>
          </div>

          <br />
          <el-form-item>
            <el-button type="primary" @click="saveLdapConfig">{{
              $t('save')
            }}</el-button>
            <el-button 
              v-show="isLdapConfigured" 
              type="success" 
              icon="el-icon-refresh"
              @click="syncLdapUsers"
            >
              {{ $t('sync') }} LDAP 用户
            </el-button>
            <el-button>{{ $t('cancel') }}</el-button>
          </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="OAuth2" name="oauth2" key="oauth2">
          <div v-if="activeTab === 'oauth2'">
          <el-form-item :label="$t('enable_oauth')">
            <el-switch v-model="form.oauth2_open"></el-switch>
          </el-form-item>
          <el-form-item label="callback url">
            <el-input
              v-model="form.oauth2_form.redirectUri"
              class="form-el"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('callback_eg')">
            http://{{
              $t('your_showdoc_server')
            }}/server/?s=/api/extLogin/oauth2
          </el-form-item>
          <div>
            <el-form-item :label="$t('入口文字提示')">
              <el-input
                v-model="form.oauth2_form.entrance_tips"
                placeholder=""
                class="form-el"
              ></el-input>
              <el-tooltip
                effect="dark"
                :content="$t('entrance_tips_content')"
                placement="top"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="Client id">
              <el-input
                v-model="form.oauth2_form.client_id"
                class="form-el"
              ></el-input>
            </el-form-item>
            <el-form-item label="Client secret">
              <el-input
                v-model="form.oauth2_form.client_secret"
                class="form-el"
              ></el-input>
            </el-form-item>

            <el-form-item label="Oauth host">
              <el-select
                v-model="form.oauth2_form.protocol"
                style="width:100px;"
              >
                <el-option label="http://" value="http"></el-option>
                <el-option label="https://" value="https"></el-option>
              </el-select>
              <el-input
                v-model="form.oauth2_form.host"
                class="form-el"
                placeholder="eg:  sso.your-site.com"
              ></el-input>
            </el-form-item>
            <el-form-item label="Authorize path">
              <el-input
                v-model="form.oauth2_form.authorize_path"
                placeholder="eg:  /oauth/v2/authorize"
                class="form-el"
              ></el-input>
            </el-form-item>
            <el-form-item label="AccessToken path">
              <el-input
                v-model="form.oauth2_form.token_path"
                placeholder="eg:  /oauth/v2/token"
                class="form-el"
              ></el-input>
            </el-form-item>
            <el-form-item label="Resource path">
              <el-input
                v-model="form.oauth2_form.resource_path"
                placeholder="eg:  /oauth/v2/resource"
                class="form-el"
              ></el-input>
            </el-form-item>
            <el-form-item label="User info path">
              <el-input
                v-model="form.oauth2_form.userinfo_path"
                placeholder="eg:  /oauth/v2/me"
                class="form-el"
              ></el-input>
              <el-tooltip
                effect="dark"
                :content="$t('userinfo_path_content')"
                placement="top"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="Logout_redirect_uri">
              <el-input
                v-model="form.oauth2_form.logout_redirect_uri"
                :placeholder="$t('logout_redirect_uri_desc')"
                class="form-el"
              ></el-input>
            </el-form-item>
          </div>
          <br />
          <el-form-item>
            <el-button type="primary" @click="saveOauth2Config">{{
              $t('save')
            }}</el-button>
            <el-button>{{ $t('cancel') }}</el-button>
          </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="通用接入" name="general" key="general" v-if="$lang == 'zh-cn'">
          <div v-if="activeTab === 'general'" style="min-height:600px;margin-top:50px;margin-left:30px;">
          <p>
            LoginSecretKey:&nbsp;
            <el-input
              readonly
              v-model="login_secret_key"
              class="form-el"
            ></el-input>
            <el-button @click="resetLoginSecretKey">{{
              $t('reset')
            }}</el-button>
          </p>
          <p>
            通用接入提供的是一种自动登录showdoc的能力，需要自己根据文档开发集成。<a
              href="https://www.showdoc.com.cn/p/0fb2753c5a48acc7c3fbbb00f9504e6b"
              target="_blank"
              >点击这里查看文档</a
            >
          </p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<style scoped>
.setting-container {
  max-width: 900px;
  padding: 20px;
}

.form-el {
  width: 400px;
}

/* Tab样式优化 */
.setting-container >>> .el-tabs__header {
  margin-bottom: 20px;
}

.setting-container >>> .el-tabs__item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
}

.setting-container >>> .el-tabs__content {
  padding: 20px 0;
}
</style>

<script>
export default {
  data() {
    return {
      activeTab: 'ldap',
      form: {
        ldap_open: false,
        ldap_form: {
          host: '',
          port: '389',
          version: '3',
          base_dn: '',
          bind_dn: '',
          bind_password: '',
          user_field: '',
          name_field: '',
          search_filter: '(cn=*)'
        },
        oauth2_open: false,
        oauth2_form: {
          redirectUri: '',
          entrance_tips: '',
          client_id: '',
          client_secret: '',
          protocol: 'https',
          host: '',
          authorize_path: '',
          token_path: '',
          resource_path: '',
          userinfo_path: '',
          logout_redirect_uri: ''
        }
      },
      login_secret_key: '',
      itemList: []
    }
  },
  computed: {
    // 判断 LDAP 是否已配置（需要有关键配置项）
    isLdapConfigured() {
      return this.form.ldap_open && 
             this.form.ldap_form && 
             this.form.ldap_form.host && 
             this.form.ldap_form.base_dn && 
             this.form.ldap_form.bind_dn
    }
  },
  methods: {
    saveLdapConfig() {
      let loading = this.$loading()
      // 设置一个最长关闭时间
      setTimeout(() => {
        loading.close()
        this.saving = false
      }, 30000)

      this.request(
        '/api/adminSetting/saveLdapConfig',
        this.form,
        'post',
        true,
        'json'
      ).then(data => {
        this.$alert(this.$t('success'))
        loading.close()
      })
    },
    syncLdapUsers() {
      // 同步 LDAP 用户
      this.$confirm('确定要同步 LDAP 用户吗？这将从 LDAP 服务器同步所有符合条件的用户到 ShowDoc。', '同步 LDAP 用户', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        let loading = this.$loading({
          lock: true,
          text: '正在同步 LDAP 用户，请稍候...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        // 设置一个最长关闭时间
        setTimeout(() => {
          loading.close()
        }, 30000)

        this.request(
          '/api/adminSetting/saveLdapConfig',
          this.form,
          'post',
          true,
          'json'
        ).then(data => {
          loading.close()
          this.$message.success('LDAP 用户同步成功！')
        }).catch(error => {
          loading.close()
          this.$message.error('LDAP 用户同步失败：' + (error.message || '未知错误'))
        })
      }).catch(() => {
        // 用户取消
      })
    },
    loadLdapConfig() {
      this.request(
        '/api/adminSetting/loadLdapConfig',
        this.form,
        'post',
        true,
        'json'
      ).then(data => {
        if (data.data.length === 0) {
          return
        }
        this.form.ldap_open = data.data.ldap_open > 0
        this.form.ldap_form = data.data.ldap_form
          ? data.data.ldap_form
          : this.form.ldap_form
      })
    },
    saveOauth2Config() {
      this.request(
        '/api/adminSetting/saveOauth2Config',
        this.form,
        'post',
        true,
        'json'
      ).then(data => {
        this.$alert(this.$t('success'))
      })
    },
    loadOauth2Config() {
      this.request(
        '/api/adminSetting/loadOauth2Config',
        this.form,
        'post',
        true,
        'json'
      ).then(data => {
        if (data.data.length === 0) {
          return
        }
        this.form.oauth2_open = data.data.oauth2_open > 0
        this.form.oauth2_form = data.data.oauth2_form
          ? data.data.oauth2_form
          : this.form.oauth2_form
        this.form.oauth2_form.logout_redirect_uri =
          data.data.oauth2_form && data.data.oauth2_form.logout_redirect_uri
            ? data.data.oauth2_form.logout_redirect_uri
            : ''
      })
    },

    getLoginSecretKey() {
      this.request('/api/adminSetting/getLoginSecretKey', {}).then(data => {
        this.login_secret_key = data.data.login_secret_key
      })
    },
    resetLoginSecretKey() {
      this.$confirm(this.$t('confirm') + '?', ' ', {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.request('/api/adminSetting/resetLoginSecretKey', {}).then(data => {
          this.login_secret_key = data.data.login_secret_key
        })
      })
    }
  },
  mounted() {
    this.loadLdapConfig()
    this.loadOauth2Config()
    this.getLoginSecretKey()
  },
  beforeDestroy() {
    this.$message.closeAll()
  }
}
</script>
